<route lang="json5">
{
  style: {
    navigationBarTitleText: '登录',
  },
}
</route>

<template>
  <view class="loginPage">
    <view class="logoSec">
      <image src="/static/icons/user/mangosteen.svg" alt="" class="w-16 h-[68px] block mx-auto" />
      <h3>蓝莓记账</h3>
    </view>
    <view class="mt-8">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            label="用户名"
            label-width="80px"
            prop="username"
            clearable
            v-model="model.username"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <wd-input
            v-if="loginType === 'password'"
            label="密码"
            label-width="80px"
            prop="password"
            show-password
            clearable
            v-model="model.password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <wd-input
            v-else
            label="验证码"
            label-width="80px"
            prop="captcha"
            custom-class="inputWithBtn"
            clearable
            v-model="model.captcha"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #suffix>
              <wd-button size="small" custom-class="small_minus" @click="handleSendCaptcha">
                获取验证码
              </wd-button>
            </template>
          </wd-input>
        </wd-cell-group>
        <view class="flex justify-between px-[15px] pt-[10px]" style="font-size: 12px">
          <view @click="handleSwitchLoginType">
            <wd-text type="primary" :text="loginTypeText"></wd-text>
            <cus-wd-icon name="swap" type="primary" class="ml-1"></cus-wd-icon>
          </view>
          <view>
            <wd-text type="primary" text="创建账号" @click="linkToRegister"></wd-text>
            <cus-wd-icon name="chevron-right" type="primary"></cus-wd-icon>
          </view>
        </view>
        <view class="footer m-4">
          <wd-button :round="false" @click="handleSubmit" block>登 录</wd-button>
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'wot-design-uni/components/wd-form/types'
import CusWdIcon from '@/components/custom-wot-comp/CusWdIcon.vue'
import { login, sendLoginCaptcha } from '@/service/index/login'
import { useToast } from 'wot-design-uni'
import { currRoute } from '@/utils'
const toast = useToast()

type CodeWayType = 'password' | 'captcha'

const model = reactive({
  username: '',
  password: '',
  captcha: '',
})
const form = ref<FormInstance>()
const loginType = ref<CodeWayType>('password')
const loginTypeText = computed(() => {
  return loginType.value === 'password' ? '切换验证码登录' : '切换密码登录'
})

onMounted(() => {
  const { query } = currRoute()
  const { username, password } = query
  if (username && password) {
    Object.assign(model, { username, password })
  }
})
const linkToRegister = () => {
  uni.navigateTo({ url: '/pages/register/register' })
}
const handleSendCaptcha = () => {
  const username = model.username
  if (!username) {
    form.value.validate('username')
    return toast.error('请输入用户名')
  } else {
    sendLoginCaptcha(username).then((res) => {
      toast.success({
        msg: res.message,
        duration: 3000,
      })
    })
  }
}
const handleSubmit = () => {
  console.log('submit!', model)
  form.value!.validate().then(async ({ valid, errors }) => {
    if (valid) {
      const res = await login<{ token: string; user: any }>({
        username: model.username,
        password: model.password,
        captcha: model.captcha,
        type: loginType.value,
      })

      if (res.statusCode === 200 || res.statusCode === 201) {
        toast.success('登录成功')
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('userInfo', JSON.stringify(res.data.user))
        setTimeout(() => {
          uni.switchTab({ url: '/pages/index/index' })
        }, 1000)
      }
    }
  })
}
const handleSwitchLoginType = () => {
  loginType.value = loginType.value === 'password' ? 'captcha' : 'password'
}
</script>

<style lang="scss" scoped>
.loginPage {
  .logoSec {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding-top: 42px;
    h3 {
      font-size: 32px;
      font-weight: bold;
      color: var(--app-name-color);
    }
  }
  .small_minus {
    // height: 24px;
    // line-height: 1;
  }
}
</style>
